﻿html,body,div,span,p,dl,dt,dd,ul,ol,li,table,thead,tbody,tfoot,tr,th,td,h1,h2,h3,h4,h5,h6,img,a,strong,form,fieldset,input,textarea,select,lable,option,blockquote,pre{margin:0; padding:0}
	table{border-collapse:collapse;border-spacing:0}
	ol,ul,li{list-style:none}
	a{text-decoration:none; color:#000;}
	a:hover{text-decoration:underline; color:#f00;}
	img{border:none;display:block;}
	em,i{font-style:normal;}
	button{ background:none;border:none;}
	.q:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;line-height:0;}
	.q{zoom:1}
	html,body{height:100%;width:100%;font-size:62.5%; font-family:"微软雅黑"; color:#666666; overflow-x:hidden; }
*{-webkit-tap-highlight-color:rgba(0,0,0,0);}
body{position:absolute;left:0;top:0;-webkit-transform-origin:0 0;transform-origin:0 0;}


#ce{width:14%;position:absolute;left:3%;bottom:5%;z-index:2; }
#ee{width:14%;position:absolute;left:3%;bottom:5%;z-index:1; opacity:0;}
.opacityTran1{transition:opacity .6s ease-in-out; -webkit-transition:-webkit-opacity .6s ease-in-out;}
.cont{width:100%;height:100%;overflow:hidden;position:relative;font-size:18px;}
.tab{width:100%;height:100%;position:absolute;left:0;top:0;perspective:800px;-webkit-perspective:800px;}
.tabc{width:100%;height:100%;position:absolute;left:0;top:0;display:none;}


.whichlan{position:absolute;right:10px;top:10px;z-index:3;}
.cur{display:block;}
.back{width:100%;height:100%;position:absolute;left:0;top:0;z-index:0;}
.zuhe1{position:absolute;width:7%;left:42%;top:40%; }

.zuhe2{position:absolute;width:7%;right:42%;bottom:40%;}

.wolfhead{position:absolute;width:50%;left:25%;height:85%;top:8%;opacity:0;}
.slideh{position:absolute;width:5%;top:45%;right:5%; animation:slide linear infinite 1.5s; -webkit-animation:slide linear infinite 1.5s;}
.logo{position:absolute;width:5%;top:8%;right:0;transform:translateY(-900%);-webkit-transform:translateY(-900%);}



.tabc_div{position:absolute;width:85%;height:80%;left:7%;top:8%;border:5px solid #333;z-index:99;}
.wolfhead2{position:absolute;width:30%;top:-7.5%;left:35%;}
.wolftit1{width:60%;position:absolute;left:21%;top:5%;}
.btn1{width:20%;position:absolute;left:40%;bottom:2%;}
.slideback{}
.wolfq1{width:60%;position:absolute;left:20%;top:3%;}
.table1{width:95%;position:absolute;left:3%;bottom:-4%;}
.table2 {width: 105%;position: absolute;left: -3%;bottom: -11%;}
.btnwolf{position:absolute;}
.wolf1{left:2%;bottom:47%;width:22%;opacity:0;}
.wolf2{left:26%;bottom:45%;width:21%;opacity:0;}
.wolf3{left:52%;bottom:42%;width:22%;opacity:0;}
.wolf4{right:8%;bottom:39%;width:17%;opacity:0;}

.anwolf{position:absolute;height:92%;left:10%;top:3%;}
.tright{position:absolute;width:50%;height:100%;right:4%;top:0;}
.antext{position:absolute;width:90%;right:5%;top:4%;}
.antextt{position:absolute;width:62%;right:19%;top:26%;}
.antextc{position:absolute;width:68%;right:16%;top:64%;}

.xiaoshi{ animation:xiaoshi .5s ease-in-out both;-webkit-animation:xiaoshi .5s ease-in-out both;}

.backText{ position:absolute;left:0;top:0;width:100%;height:100%;z-index:5;text-align:center;}
.kuang{border:5px solid #333; width:80%;height:80%;position:absolute;left:10%;top:10%;}
.bpwolf{position:absolute;width:18%;left:41%;top:5%;}
.headText{position:absolute;width:32%;left:35%;top:32%;}
.barCover{position:absolute;width:80%;height:10px;left:10%;bottom:10%;overflow:hidden;}
.barCover img{position:absolute;left:-100%;width:100%;height:5px;}
.startClick{position:absolute;left:0;width:100%;height:100%;opacity:0.6; background-color:#000;z-index:200;}
.clickself{position:absolute;width:46%;top:32%;left:27%;z-index:200;}
.wycs{position:absolute;left:0;top:0;width:100%;height:100%;z-index:-10;opacity:0;}
.wycsbtn{display:inline-block;height:100%;margin-left:10px;}
.againleft{display:inline-block;height:100%;}
.againOut{position:absolute;width:100%;bottom:5%;height:11.5%;text-align:center; white-space:nowrap;}
.again{display:inline-block;height:100%;}
.again1{display:inline-block;height:100%; margin-left:15px;}
.speleft{left:-10%;}

.clickh{position:absolute;width:20%;top:3%;right:3%;z-index:-1;opacity:0;}
.clickh1{position:absolute;width:20%;left:0;top:10%; transform:rotate(-90deg);-webkit-transform:rotate(-90deg);z-index:-1;opacity:0;}
.startClick1{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0; background-color:#000;z-index:-1;}

/*动画列表*/
@-webkit-keyframes zu1{
	0%{left:42%;top:40%;}
	100%{left:3%;top:5%;}
}
@keyframes zu1{
	0%{left:42%;top:40%;}
	100%{left:3%;top:5%;}
}
.zuhe1a{animation:zu1 1s ease-in-out both;-webkit-animation:zu1 1s ease-in-out both;}
@-webkit-keyframes zu2{
	0%{right:42%;bottom:40%;}
	100%{right:3%;bottom:5%;}
}
@keyframes zu2{
	0%{right:42%;bottom:40%;}
	100%{right:3%;bottom:5%;}
}
.zuhe2a{animation:zu2 1s ease-in-out both;-webkit-animation:zu2 1s ease-in-out both;}

@-webkit-keyframes xiaoshi{
	0%{opacity:0.6;}
	100%{opacity:0;z-index:-10;}
}
@keyframes xiaoshi{
	0%{opacity:0.6;}
	100%{opacity:0;z-index:-10;}
}
.xiaoshi{ animation:xiaoshi .5s ease-in-out both;-webkit-animation:xiaoshi .5s ease-in-out both;}

@-webkit-keyframes show{
	0%{opacity:0;}
	100%{opacity:1;z-index:10;}
}
@keyframes show{
	0%{opacity:0;}
	100%{opacity:1;z-index:10;}
}
.show{ animation:show .5s ease-in-out both;-webkit-animation:show .5s ease-in-out both;}

@-webkit-keyframes show1{
	0%{opacity:0;}
	100%{opacity:0.6;z-index:10;}
}
@keyframes show1{
	0%{opacity:0;}
	100%{opacity:0.6;z-index:10;}
}
.show1{ animation:show1 .5s ease-in-out both;-webkit-animation:show1 .5s ease-in-out both;}

@-webkit-keyframes slide{
	0%{transform:translateX(-50%);-webkit-transform:translateX(-50%);opacity:1;}
	100%{transform:translateX(50%);-webkit-transform:translateX(50%);opacity:0.6;}
}
@keyframes slide{
	0%{transform:translateX(-50%);-webkit-transform:translateX(-50%);opacity:1;}
	100%{transform:translateX(50%);-webkit-transform:translateX(50%);opacity:0.6;}
} 

@-webkit-keyframes showob{
	0%{ transform:translateY(-900%);-webkit-transform:translateY(-900%);}
	85%{ transform:translateY(0%);-webkit-transform:translateY(0%);}
	94%{ transform:translateY(-17%);-webkit-transform:translateY(-17%);}
	100%{ transform:translateY(0%);-webkit-transform:translateY(0%);}
}
@keyframes showob{
	0%{ transform:translateY(-900%);-webkit-transform:translateY(-900%);}
	85%{ transform:translateY(0%);-webkit-transform:translateY(0%);}
	94%{ transform:translateY(-17%);-webkit-transform:translateY(-17%);}
	100%{ transform:translateY(0%);-webkit-transform:translateY(0%);}
}
.showob{animation:showob 1s ease-in both 0.5s;-webkit-animation:showob 1s ease-in both 0.5s;}
@-webkit-keyframes translateX{
	0%{transform:translateX(0%);-webkit-transform:translateX(0%);}
	100%{transform:translateX(-110%);-webkit-transform:translateX(-110%);}
}
@keyframes translateX{
	0%{transform:translateX(0%);-webkit-transform:translateX(0%);}
	100%{transform:translateX(-110%);-webkit-transform:translateX(-110%);}
}
.translateX{animation:translateX both 1s linear .8s;-webkit-animation:translateX both 1s linear .8s;}

@-webkit-keyframes translateX3{
	0%{transform:translateX(0%);-webkit-transform:translateX(0%);}
	100%{transform:translateX(-130%);-webkit-transform:translateX(-130%);}
}
@keyframes translateX3{
	0%{transform:translateX(0%);-webkit-transform:translateX(0%);}
	100%{transform:translateX(-130%);-webkit-transform:translateX(-130%);}
}
.translateX3{animation:translateX3 both 1s linear .8s;-webkit-animation:translateX3 both 1s linear .8s;}

@-webkit-keyframes translateX1{
	0%{transform:translateX(130%);-webkit-transform:translateX(130%);}
	100%{transform:translateX(0%);-webkit-transform:translateX(0%);}
	
}
@keyframes translateX1{
	0%{transform:translateX(130%);-webkit-transform:translateX(130%);}
	100%{transform:translateX(0%);-webkit-transform:translateX(0%);}
	
}
.translateX1{animation:translateX1 both 1s linear .8s;-webkit-animation:translateX1 both 1s linear .8s;}

@-webkit-keyframes translateX2{
	0%{transform:translateX(100%);-webkit-transform:translateX(100%);}
	100%{transform:translateX(0%);-webkit-transform:translateX(0%);}
	
}
@keyframes translateX2{
	0%{transform:translateX(100%);-webkit-transform:translateX(100%);}
	100%{transform:translateX(0%);-webkit-transform:translateX(0%);}
	
}
.translateX2{animation:translateX2 both 1s linear .8s;-webkit-animation:translateX2 both 1s linear .8s;}

@-webkit-keyframes translateY{
	0%{transform:translateY(-100%);-webkit-transform:translateY(-100%);}
	100%{transform:translateY(0%);-webkit-transform:translateY(0%);}
}
@keyframes translateY{
	0%{transform:translateY(-100%);-webkit-transform:translateY(-100%);}
	100%{transform:translateY(0%);-webkit-transform:translateY(0%);}
}
.translateY{animation:translateY both 1s linear .8s;-webkit-animation:translateY both 1s linear .8s;}

@-webkit-keyframes translateY1{
	0%{transform:translateY(0%);-webkit-transform:translateY(0%);}
	100%{transform:translateY(100%);-webkit-transform:translateY(100%);}
}
@keyframes translateY1{
	0%{transform:translateY(0%);-webkit-transform:translateY(0%);}
	100%{transform:translateY(100%);-webkit-transform:translateY(100%);}
}
.translateY1{animation:translateY1 both 1s linear .8s;-webkit-animation:translateY1 both 1s linear .8s;}

@-webkit-keyframes translateY2{
	0%{transform:translateY(-150%);-webkit-transform:translateY(-150%);}
	100%{transform:translateY(0%);-webkit-transform:translateY(0%);}
}
@keyframes translateY2{
	0%{transform:translateY(-150%);-webkit-transform:translateY(-150%);}
	100%{transform:translateY(0%);-webkit-transform:translateY(0%);}
}
.translateY2{animation:translateY2 both .5s ease-in 2.5s;-webkit-animation:translateY2 both .5s ease-in 2.5s;}

@-webkit-keyframes translateY3{
	0%{transform:translateY(-1500%);-webkit-transform:translateY(-1500%);}
	100%{transform:translateY(0%);-webkit-transform:translateY(0%);}
}
@keyframes translateY3{
	0%{transform:translateY(-1500%);-webkit-transform:translateY(-1500%);}
	100%{transform:translateY(0%);-webkit-transform:translateY(0%);}
}
.translateY3_1{animation:translateY3 both .2s ease-in-out 3.3s;-webkit-animation:translateY3 both .2s ease-in-out 3.3s;}
.translateY3_2{animation:translateY3 both .3s ease-in-out 3.4s;-webkit-animation:translateY3 both .3s ease-in-out 3.4s;}
.translateY3_3{animation:translateY3 both .4s ease-in-out 3.5s;-webkit-animation:translateY3 both .4s ease-in-out 3.5s;}
.translateY3_4{animation:translateY3 both .5s ease-in-out 3.6s;-webkit-animation:translateY3 both .5s ease-in-out 3.6s;}

@keyframes scale1{
	20%{transform:scale(0.7,0.7);-webkit-transform:scale(0.7,0.7);}
	40%{transform:scale(1.3,1.3);-webkit-transform:scale(1.3,1.3);}
	100%{transform:scale(1,1);-webkit-transform:scale(1,1);}
}
@-webkit-keyframes scale1{
	20%{transform:scale(0.7,0.7);-webkit-transform:scale(0.7,0.7);}
	50%{transform:scale(1.3,1.3);-webkit-transform:scale(1.3,1.3);}
	100%{transform:scale(1,1);-webkit-transform:scale(1,1);}
}
.scale1{ animation:scale1 .8s ease-in-out;-webkit-animation:scale1 .8s ease-in-out;}


@keyframes nowleft{
	0%{transform:translateX(0%);-webkit-transform:translateX(0%);}
	100%{transform:translateX(-100%);-webkit-transform:translateX(-100%);}
}
@-webkit-keyframes nowleft{
	0%{transform:translateX(0%);-webkit-transform:translateX(0%);}
	100%{transform:translateX(-100%);-webkit-transform:translateX(-100%);}
}
.nowleft{animation:nowleft 1s linear both;-webkit-animation:nowleft 1s linear both;}

@keyframes nowleft1{
	0%{left:-90%;}
	40%{left:-70%;}
	60%{left:-40%;}
	100%{left:-25%;}
}
@-webkit-keyframes nowleft1{
	0%{left:-90%;}
	40%{left:-70%;}
	60%{left:-40%;}
	100%{left:-25%;}
}
.nowleft1{animation:nowleft1 1s ease-in-out both;-webkit-animation:nowleft1 1s ease-in-out both;}

@keyframes nowleft2{
	0%{left:-25%;}
	100%{left:0;}
}
@-webkit-keyframes nowleft2{
	0%{left:-25%;}
	100%{left:0;}
}
.nowleft2{animation:nowleft2 0.8s ease-in-out both;-webkit-animation:nowleft2 0.8s ease-in-out both;}

@keyframes disappear{
	0%{opacity:0;}
	100%{opacity:1;}
}
@-webkit-keyframes disappear{
	0%{opacity:0;}
	100%{opacity:1;}
}
@keyframes disappear_{
	0%{opacity:0;}
	100%{opacity:0.6;}
}
@-webkit-keyframes disappear_{
	0%{opacity:0;}
	100%{opacity:0.6;}
}
.disappear{ animation:disappear .8s ease-in-out 1.8s both;-webkit-animation:disappear .8s ease-in-out 1.8s both;}
.disappear1{ animation:disappear .8s ease-in-out 2s both;-webkit-animation:disappear .8s ease-in-out 2s both;}
.disappear2{ animation:disappear .5s ease-in-out 1s both;-webkit-animation:disappear .5s ease-in-out 1s both;}
.disappear3{ animation:disappear .5s ease-in-out .5s both;-webkit-animation:disappear .5s ease-in-out .5s both;}
.disappear2_{ animation:disappear_ .5s ease-in-out 1s both;-webkit-animation:disappear_ .5s ease-in-out 1s both;}
@keyframes drop{
	0%{ transform:translateY(-9999%);-webkit-transform:translateY(-9999%);}
	90%{ transform:translateY(0%);-webkit-transform:translateY(0%);}
	95%{ transform:translateY(-70%);-webkit-transform:translateY(-70%);}
	100%{ transform:translateY(0%);-webkit-transform:translateY(0%);}
}
@-webkit-keyframes drop{
	0%{ transform:translateY(-9999%);-webkit-transform:translateY(-9999%);}
	90%{ transform:translateY(0%);-webkit-transform:translateY(0%);}
	95%{ transform:translateY(-70%);-webkit-transform:translateY(-70%);}
	100%{ transform:translateY(0%);-webkit-transform:translateY(0%);}
}
.drop{ animation:drop 1.2s ease-in 1.6s both;-webkit-animation:drop 1.2s ease-in 1.6s both;}
.drop_{ animation:drop 1.2s ease-in both;-webkit-animation:drop 1.2s ease-in both;}

@keyframes drop1{
	0%{ transform:translateY(-900%);-webkit-transform:translateY(-900%);}
	85%{ transform:translateY(0%);-webkit-transform:translateY(0%);}
	94%{ transform:translateY(-17%);-webkit-transform:translateY(-17%);}
	100%{ transform:translateY(0%);-webkit-transform:translateY(0%);}
}
@-webkit-keyframes drop1{
	0%{ transform:translateY(-900%);-webkit-transform:translateY(-900%);}
	85%{ transform:translateY(0%);-webkit-transform:translateY(0%);}
	94%{ transform:translateY(-17%);-webkit-transform:translateY(-17%);}
	100%{ transform:translateY(0%);-webkit-transform:translateY(0%);}
}
.drop1{ animation:drop1 1s ease-in 1.3s both;-webkit-animation:drop1 1s ease-in 1.3s both;}

@keyframes drop2{
	0%{ transform:translateY(-200%);-webkit-transform:translateY(-200%);}
	80%{ transform:translateY(0%);-webkit-transform:translateY(0%);}
	90%{ transform:translateY(-5%);-webkit-transform:translateY(-5%);}
	100%{ transform:translateY(0%);-webkit-transform:translateY(0%);}
}
@-webkit-keyframes drop2{
	0%{ transform:translateY(-200%);-webkit-transform:translateY(-200%);}
	80%{ transform:translateY(0%);-webkit-transform:translateY(0%);}
	90%{ transform:translateY(-5%);-webkit-transform:translateY(-5%);}
	100%{ transform:translateY(0%);-webkit-transform:translateY(0%);}
}
.drop2{ animation:drop2 0.6s ease-in 0.1s both;-webkit-animation:drop2 0.6s ease-in 0.1s both;}

@keyframes rotate{
	0%{transform:rotateX(0deg);-webkit-transform:rotateX(0deg);}
	100%{transform:rotateX(360deg);-webkit-transform:rotateX(360deg);}
}
@-webkit-keyframes rotate{
	0%{transform:rotateX(0deg) scale(1,1) translate(0,0);-webkit-transform:rotateX(0deg) scale(1,1) translate(0,0);opacity:1}
	30%{transform:rotateX(0deg) scale(1.2,1.2) translate(0,0);-webkit-transform:rotateX(0deg) scale(1.2,1.2) translate(0,0);opacity:1;}
	60%{transform:rotateX(0deg) scale(1,1) translate(0,0);-webkit-transform:rotateX(0deg) scale(1,1) translate(0,0);opacity:1;}
	100%{transform:rotateX(720deg) scale(0.3,0.3) translate(30%,30%);-webkit-transform:rotateX(720deg) scale(0.3,0.3) translate(30%,30%);opacity:0;}
}
.rotate{ animation:rotate 1s ease-in .8s both;-webkit-animation:rotate 1s ease-in .8s both;}
